<template>
	<view>
		<scroll-view
			class="scroll"
			scroll-y="true"
			@scrolltolower="scrolltolower"
			refresher-enabled="true"
			:refresher-triggered="triggered"
			:refresher-threshold="100"
			refresher-background="#666"
			@refresherrefresh="onRefresh"
			@refresherrestore="onRestore"
		>
			<!-- #ifdef H5 -->
			<uni-nav-bar left-icon="back" @clickLeft="back" :border="false" title="订单列表"></uni-nav-bar>
			<!-- #endif -->
			<view class="tab">
				<view class="tab_item" :class="tab_index == 1 ? 'tab_active' : ''" @click="tab_change_index" data-index="1">全部订单</view>
				<view class="tab_item" :class="tab_index == 2 ? 'tab_active' : ''" @click="tab_change_index" data-index="2">完成订单</view>
				<view class="tab_item" :class="tab_index == 3 ? 'tab_active' : ''" @click="tab_change_index" data-index="3">取消订单</view>
			</view>
			<view class="list" v-show="tab_index == 1">
				<view class="list_item" v-for="(item, index) in all_list" :key="index" @click="orderInfo(item)">
					<image class="list_item_pic" :src="item.filmPic"></image>
					<view class="list_item_text">
						<view class="list_item_text_name">
							{{ item.filmName }}
							<text class="list_item_text_text">{{ item.seat.split(',').length }}张</text>
						</view>
						<view class="list_item_text_text">{{ item.cinemaName }}</view>
						<view class="list_item_text_text">{{ item.hallName }}</view>
						<view class="list_item_text_text">{{ item.showTime | formatTime }}</view>
						<view class="list_item_text_text"></view>
					</view>
					<view class="list_item_status" :class="item.status==1?'list_item_status_active':''">{{ item.status | status }}</view>
				</view>
			</view>
			<view class="list" v-show="tab_index == 2">
				<view class="list_item" v-for="(item, index) in finish_list" :key="index" @click="orderInfo(item)">
					<image class="list_item_pic" :src="item.filmPic"></image>
					<view class="list_item_text">
						<view class="list_item_text_name">
							{{ item.filmName }}
							<text class="list_item_text_text">{{ item.seat.split(',').length }}张</text>
						</view>
						<view class="list_item_text_text">{{ item.cinemaName }}</view>
						<view class="list_item_text_text">{{ item.hallName }}</view>
						<view class="list_item_text_text">{{ item.showTime | formatTime }}</view>
						<view class="list_item_text_text"></view>
					</view>
					<view class="list_item_status" :class="item.status==1?'list_item_status_active':''">{{ item.status | status }}</view>
				</view>
			</view>
			<view class="list" v-show="tab_index == 3">
				<view class="list_item" v-for="(item, index) in close_list" :key="index" @click="orderInfo(item)">
					<image class="list_item_pic" :src="item.filmPic"></image>
					<view class="list_item_text">
						<view class="list_item_text_name">
							{{ item.filmName }}
							<text class="list_item_text_text">{{ item.seat.split(',').length }}张</text>
						</view>
						<view class="list_item_text_text">{{ item.cinemaName }}</view>
						<view class="list_item_text_text">{{ item.hallName }}</view>
						<view class="list_item_text_text">{{ item.showTime | formatTime }}</view>
						<view class="list_item_text_text"></view>
					</view>
					<view class="list_item_status">{{ item.status | status }}</view>
				</view>
			</view>
			<!-- 结果为空 -->
			<view class="empty" v-show="is_empty">
				<image src="../../static/empty.png" class="empty_img"></image>
				<view class="empty_text">抱歉啦,没有找到~</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
import Route from '../../utils/route.js';
export default {
	data() {
		return {
			tab_index: 1,
			list: [],
			all_list: [],
			all_page: 1,
			all_page_last: 1,
			finish_list: [],
			finish_page: 1,
			finish_page_last: 1,
			close_list: [],
			close_page: 1,
			close_page_last: 1,
			// 数据为空
			is_empty: 0,
			// 刷新状态
			triggered: true,
			_freshing: false,
		};
	},
	async onLoad() {
		await this.getOrderList(1, 1);
		await this.getOrderList(1, 2);
		await this.getOrderList(1, 3);
	},
	filters: {
		formatTime(timestamp) {
			var date = new Date(timestamp * 1000); //timestamp 为10位需*1000，timestamp 为13位的话不需乘1000
			var Y = date.getFullYear() + '-';
			var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
			var D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' ';
			var h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
			var m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
			var s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
			return Y + M + D + h + m + s;
		},
		status(int) {
			switch (int) {
				case 1:
					return '待支付';
				case 2:
					return '受理中';
				case 3:
					return '待出票';
				case 4:
					return '已出票';
				case 5:
					return '已取票';
				case 10:
					return '已关闭';
				case 11:
					return '已退款';
				default:
					return '已完结';
			}
		}
	},
	methods: {
		//更新数据
		async update(){
			uni.showLoading()
			await this.updateDate(1, 1);
			await this.updateDate(1, 2);
			await this.updateDate(1, 3);
		},
		async updateDate(page = 1, type = 0){
			let res = await Route.order_list({
				page: page,
				type: type,
				uid: uni.getStorageSync('userInfo').uid
			});
			switch (type) {
				case 1:
					this.all_list = (res.list);
					this.all_page_last = res.lastpage;
					this.all_page = 1;
					uni.hideLoading();
					break;
				case 2:
					this.finish_list = (res.list);
					this.finish_page = 1;
					uni.hideLoading();
					break;
				case 3:
					this.close_list = (res.list);
					this.close_page = 1;
					uni.hideLoading();
					break;
			
				
			}
			
			uni.hideLoading();
		},
		// 点击订单
		orderInfo(e){
			switch (e.status) {
				case 1:
					let data = {
						order_num:e.order_num,
						filmId: e.filmId,
						showId: e.showId,
						showTime: e.showTime,
						cinemaName: e.cinemaName,
						hallName: e.hallName,
						seatList: e.seat.split(","),
						seatLength:(e.seat.split(",")).length,
						Price:e.money,
						vipPrice:e.money,
					};
					// return;
					if(data.showTime <= Math.floor((new Date().getTime()+3600) / 1000)){
						return uni.showToast({
							icon: 'none',
							title: '订单失效啦~'
						});
					}
					uni.navigateTo({
						url: '../pay/pay?data=' + JSON.stringify(data)
					});
					break;
				case 2:
				uni.navigateTo({
					url:'../order_info/order_info?order_num='+e.order_num
				})
					return uni.showToast({
						icon: 'none',
						title: '小主别急,正在火速抢票中'
					});
				case 3:
					return '待出票';
				case 10:
				uni.navigateTo({
					url:'../order_info/order_info?order_num='+e.order_num
				})
					return '订单关闭';
				default:
				uni.navigateTo({
					url:'../order_info/order_info?order_num='+e.order_num
				})
					return '已出票';
			}
		},
		
		// 下拉刷新
		async onRefresh() {
			if (this._freshing) return;
			this._freshing = true;
			let res = await Route.order_list({
				type: this.tab_index,
				uid: uni.getStorageSync('userInfo').uid
			});
			switch (parseInt(this.tab_index)) {
				case 1:
					this.all_list = res.list;
					this.all_page = 1;
					this.all_page_last = res.lastpage;
					uni.hideLoading();
					break;
				case 2:
					this.finish_list = res.list;
					this.finish_page = 1;
					this.finish_page_last = res.lastpage;
					uni.hideLoading();
					break;
				case 3:
					this.close_list = res.list;
					this.close_page = 1;
					this.close_page_last = res.lastpage;
					uni.hideLoading();
					break;
			}
			this.triggered = false;
			this._freshing = false;
		},
		onRestore() {
			this.triggered = 'restore'; // 需要重置
		},
		// 请求数据
		async getOrderList(page = 1, type = 0) {
			let res = await Route.order_list({
				page: page,
				type: type,
				uid: uni.getStorageSync('userInfo').uid
			});
			switch (type) {
				case 2:
					this.finish_list = this.finish_list.concat(res.list);
					this.finish_page_last = res.lastpage;
					uni.hideLoading();
					break;
				case 3:
					this.close_list = this.close_list.concat(res.list);
					this.close_page_last = res.lastpage;
					uni.hideLoading();
					break;

				case 1:
					this.all_list = this.all_list.concat(res.list);
					this.all_page_last = res.lastpage;
					uni.hideLoading();
					break;
			}

			uni.hideLoading();
		},
		// 返回
		back() {
			uni.navigateBack();
		},
		// 选项卡
		tab_change_index(e) {
			let arr = [];
			this.tab_index = e.currentTarget.dataset.index;
			switch (parseInt(this.tab_index)) {
				case 1:
					if (this.all_list.length <= 0) {
						this.is_empty = 1;
					} else {
						this.is_empty = 0;
					}
					break;
				case 2:
					if (this.finish_list.length <= 0) {
						this.is_empty = 1;
					} else {
						this.is_empty = 0;
					}
					break;
				case 3:
					if (this.close_list.length <= 0) {
						this.is_empty = 1;
					} else {
						this.is_empty = 0;
					}
					break;
			}
		},
		// 列表-触底
		scrolltolower() {
			uni.showLoading();
			switch (parseInt(this.tab_index)) {
				case 1:
					if (this.all_page > this.all_page_last) {
						return uni.showToast({
							icon: 'none',
							title: '没有更多啦'
						});
					}
					this.all_page += 1;
					this.getOrderList(this.all_page,1);
					break;
				case 2:
					if (this.finish_page > this.finish_page_last) {
						return uni.showToast({
							icon: 'none',
							title: '没有更多啦'
						});
					}
					this.finish_page += 1;
					this.getOrderList(this.finish_page, this.tab_index);
					break;
				case 3:
					if (this.close_page > this.close_page_last) {
						return uni.showToast({
							icon: 'none',
							title: '没有更多啦'
						});
					}
					this.close_page += 1;
					this.getOrderList(this.close_page, this.tab_index);
					break;
			}
		}
	}
};
</script>

<style lang="scss">
.scroll {
	width: 100vw;
	height: 100vh;
	display: flex;
	flex-direction: column;
}
// 选项卡
.tab {
	display: flex;
	width: 100%;
	height: 88rpx;
	justify-content: space-around;
	align-items: center;
	&_item {
		font-size: $uni-font-size-lg;
		position: relative;
		color: $uni-text-color-grey;
	}
	&_active {
		color: $template-background;
	}
	&_active:after {
		//伪元素实现第二层
		content: ' ';
		position: absolute;
		left: 0;
		bottom: -9px;
		width: 100%;
		height: 6rpx;
		background: $template-background;
		border-radius: $uni-border-radius-lg;
	}
}
// 电影列表
.list {
	display: flex;
	flex-direction: column;
	align-items: center;
	&_item {
		position: relative;
		width: 690rpx;
		padding: 33rpx 0;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		border-top: 1rpx solid $template-line;
		&_pic {
			width: 186rpx;
			height: 266rpx;
			border-radius: 8rpx;
		}
		&_text {
			height: 266rpx;
			width: 366rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			&_name {
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 1;
				overflow: hidden;
				display: flex;
				font-size: $uni-font-size-lg;
				color: #000;
				font-weight: 600;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 1;
				overflow: hidden;
			}
			&_text {
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 1;
				overflow: hidden;
				margin-left: 8rpx;
				font-size: $uni-font-size-base;
				color: $uni-text-color-grey;
			}
		}
		&_status {
			padding: 10rpx 16rpx;
			font-size: $uni-font-size-base;
			color: $uni-text-color-grey;
		}
		&_status_active{
			border-radius: 8rpx;
			background-color: $template-background;
			color: #fff;
		}
	}
}
// 空列表
.empty {
	position: fixed;
	top: 88rpx;
	left: 0;
	z-index: 9;
	background: #fff;
	width: 100vw;
	height: calc(100vh - 88rpx);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	&_img {
		width: 386rpx;
		height: 282rpx;
	}
	&_text {
		margin-top: 8rpx;
		font-size: $uni-font-size-base;
		color: $uni-text-color-grey;
	}
}
</style>
